<template>
  <div>
    <SearchForm :columns="formColumn" @search="search" @reset="search" />
    <div class="add11">
      <scTable ref="table" v-bind="list" row-key="id" stripe :setUpType="false" 
      :tableRadio="true" :vritualData="vritualData"
      @isCheckTable="isCheckTable"
      >
        <el-table-column type="selection" width="50"></el-table-column>
      </scTable>
    </div>
  </div>
  <div style="padding: 30px;">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item :label="item.label" v-for="(item, index) in formItemList" :key="index">
        <div v-if="item.component == 'input'">
          <el-input
          :disabled="
          item.disabled ? true : 
          isCheck ? false : true
          " 
          @blur="inputBlur"
          v-model="formInline[item.prop]" />
        </div>
        <div v-else-if="item.component == 'select'">
          <el-select v-model="formInline[item.prop]"             
          :disabled="isCheck ? false : true">
            <el-option :label="oItem.label"
            :value="oItem.value"
            v-for="(oItem, oIndex) in item.option" :key="oIndex"/>
          </el-select>
        </div>
        <div v-else>
          <el-date-picker :disabled="isCheck ? false : true" v-model="formInline[item.prop]" type="daterange" range-separator="至" start-placeholder="开始时间"
          end-placeholder="结束时间" size="default" />
        </div>
      </el-form-item>
      <el-form-item v-if="isCheck">
        <span class="tips">*课时单价=报名价格÷(上课次数x每次包含)</span>
      </el-form-item>


      <div class="shangpin">
        <el-button type="primary" icon="el-icon-plus" @click="addGoods">添加商品</el-button>
      </div>
      <div class="good-list">
        <div class="item" v-for="(item, index) in courseFormState" :key="index">
          <div>
            {{ item.name }}
          </div>
          <div class="icon" @click="remove(item, index)">
            <el-icon>
              <Close />
            </el-icon>
          </div>
        </div>
      </div>
      <hr>
      <div class="form-item">
        <div class="inp-name">课程大纲</div>
        <div class="table">
          <div class="title">
            <div>课次</div>
            <div>大纲内容</div>
          </div>
          <div class="content-list">
            <div class="table-item" v-for="(item, index) in courseState.curriculum" :key="index">
              <div>{{ index + 1 }}</div>
              <div>
                <el-input placeholder="在此输入大纲内容" v-model="item.content"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex;">
        <span class="m-r-15"><el-button type="primary">确认建班</el-button></span>
        <span class="m-r-15"><el-button>下一步</el-button></span>
        <span><el-button type="danger">取消</el-button></span>
      </div>
      <div class="dia-box">
        <el-dialog v-model="dialogVisible" title="选择商品" width="40%">
          <div class="dialog-content">
            <div class="goods-tag">
              <div class="item" v-for="(item, index) in selectGoodsState.checkGoodsList" :key="index">
                <div>{{ item.name }}</div>
                <div class="icon" @click="removeCheckout(item, index)">
                  <el-icon>
                    <Close />
                  </el-icon>
                </div>
              </div>
            </div>
            <div class="search-box">
              <div>商品分类</div>
              <div>
                <el-select v-model="selectGoodsState.categor" placeholder="请选择" size="large">
                  <el-option v-for="item in schollOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div style="display: flex;">
                <div style="margin: 10px 15px;  ">商品名称</div>
                <div>
                  <el-input placeholder="请输入商品名称" v-model="selectGoodsState.goodName" size="large"></el-input>
                </div>
              </div>
              <div><el-button type="primary">搜索</el-button></div>
            </div>
            <div class="table-list">
              <div class="title">
                <div class="item" :style="{ width: `${title.width}` }" v-for="(title, titIndex) in selectGoodsState.cloumn"
                  :key="titIndex">
                  {{ title.label }}
                </div>
              </div>
              <div class="goods-item" v-for="(item, index) in selectGoodsState.goodsList" :key="index">
                <div class="item" v-for="(item2, index2) in selectGoodsState.cloumn" :key="index2"
                  :style="{ width: `${item2.width}` }">
                  <div v-if="index2 == 0" class="btn">
                    <span @click="selectGoods(item, index)"
                      :style="item[item2.prop] ? 'color: #ff4a3f;' : 'color: #3faae2;'">
                      {{ item[item2.prop] ? '【取消】' : '【选择】' }}
                    </span>
                  </div>
                  <div v-else-if="index2 == 4" class="inp">
                    <el-input placeholder="" v-model="item[item2.prop]"></el-input>
                  </div>
                  <div v-else>
                    {{ item[item2.prop] }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="fuzhi">保存</el-button>
              <el-button type="danger" @click="dialogVisible = false">取消</el-button>
            </span>
          </template>

        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
import SearchForm from "@/components/SearchForm/index.vue";
import { formColumn, column } from "./add1.js";
import { Close } from "@element-plus/icons-vue";

export default {
  data() {
    return {
      formColumn,
      list: {
        apiObj: null,
				params: {},
        column
      },
      formInline: {
        className: "",
        year: "",
        studentNum: "",
        courseNum: "",
        price: "",
        originalCost: "",
        classTimeInterval: "",
        timeCost: "",
        schoolName: "",
        openClassTime: "",
      },
      dialogVisible: false,
      selectGoodsState: {
        categor: "",
        goodName: "",
        goodsList: [
          { name: '商品', id: 1, checkOut: false, categor: '中医', goodsNo: "84359316932", price: "500" },
          { name: "商品2", id: 2, checkOut: false, categor: '中医2', goodsNo: "84359316732", price: "500" },
          { name: "商品3", id: 3, checkOut: false, categor: '中医2', goodsNo: "84359316732", price: "500" },
          { name: "商品4", id: 4, checkOut: false, categor: '中医2', goodsNo: "84359316732", price: "500" },
          { name: "商品5", id: 5, checkOut: false, categor: '中医2', goodsNo: "84359316732", price: "500" },
          { name: "商品6", id: 6, checkOut: false, categor: '中医2', goodsNo: "84359316732", price: "500" },
          { name: "商品7", id: 7, checkOut: false, categor: '中医2', goodsNo: "84359316732", price: "500" },
          { name: "商品8", id: 8, checkOut: false, categor: '中医2', goodsNo: "84359316732", price: "500" },
          { name: "商品9", id: 9, checkOut: false, categor: '中医2', goodsNo: "84359316732", price: "500" }
        ],
        checkGoodsList: [],
        cloumn: [
          {
            prop: "checkOut",
            label: "操作",
            width: "14%"
          },
          {
            prop: "categor",
            label: "商品分类",
            width: "22%"
          },
          {
            prop: "name",
            label: "商品名称",
            width: "19%"
          },
          {
            prop: "goodsNo",
            label: "商品编号",
            width: "26%"
          },
          {
            prop: "price",
            label: "绑定售卖价",
            width: "19%"
          },
        ]
      },
      schollOptions: [],
      courseFormState: [],
      courseState:
      {
        curriculum: [{ content: "" }]
      },
      vritualData: [
        {
          schoolName: "学校1",
          className: "班级1",
          year: "2023年",
          studentNum: "300",
          courseNum: "10",
          price: "288",
          originalCost: "388",
          classTimeInterval: "白班",
          timeCost: "80",
          openClassTime: ['2023-03-06', '2023-12-31'],
          schoolTerm: "春季"
        },
        {
          schoolName: "学校2",
          className: "班级2",
          year: "2023年",
          studentNum: "500",
          courseNum: "20",
          price: "688",
          originalCost: "888",
          classTimeInterval: "晚班",
          timeCost: "80",
          openClassTime: ['2023-03-06', '2023-12-31'],
          schoolTerm: "春季"
        },
      ],
      formItemList: [
        {label: "班级名称", prop: "className", component: "input"},
        {label: "年份", prop: "year", component: "select", 
          option: [
            {value: "2021年", label: "2021年"},
            {value: "2022年", label: "2022年"},
            {value: "2023年", label: "2023年"},
            {value: "2024年", label: "2024年"},
            {value: "2025年", label: "2025年"},
            {value: "2026年", label: "2026年"},
          ]
        },
        {label: "招生人数", prop: "studentNum", component: "input"},
        {label: "课程课次", prop: "courseNum", component: "input"},
        {label: "报名价格", prop: "price", component: "input"},
        {label: "班级原价", prop: "originalCost", component: "input"},
        {label: "班级时段", prop: "classTimeInterval", component: "select",
          option: [
            {value: "白班", label: "白班"},
            {value: "晚班", label: "晚班"},
            {value: "周末班", label: "周末班"}
          ]
        },
        {label: "课时单价", prop: "timeCost", component: "input", type: "number", disabled: true},
        {label: "校区", prop: "schoolName", component: "input"},
        {label: "开班时间", prop: "openClassTime", component: "date"}
      ],
      isCheck: false
    }
  },
  components: {
    SearchForm,
    Close
  },
  methods: {
    inputBlur() {
      const reg = /^[0-9]+.?[0-9]*/
      const isNum1 = reg.test(this.formInline.courseNum)
      const isNum2 = reg.test(this.formInline.price)
      const isNum3 = reg.test(this.formInline.originalCost)
      if (!isNum1) {this.formInline.courseNum = ""}else{
        this.formInline.courseNum = Math.round(this.formInline.courseNum)
      }
      if (!isNum2) {this.formInline.price = ""}else{
        this.formInline.price = (this.formInline.price*1).toFixed(2)
      }
      if (!isNum3) {this.formInline.originalCost = ""}else{
        this.formInline.originalCost = (this.formInline.originalCost*1).toFixed(2)
      }
    },
    isCheckTable(row) {
      this.formInline = JSON.parse(JSON.stringify(row))
      this.isCheck = true
    },
    search(searchParams) {
    },
    removeCheckout(item, index) {
      this.selectGoodsState.checkGoodsList.splice(index, 1)
      const len = this.selectGoodsState.goodsList.length
      for (let i = 0; i < len; i++) {
        if (this.selectGoodsState.goodsList[i].id == item.id) {
          this.selectGoodsState.goodsList[i].checkOut = false
          break;
        }
      }
      0
    },
    selectGoods(item, index) {
      const isCheckOutId = this.selectGoodsState.checkGoodsList.map(m => m.id)
      const isHave = isCheckOutId.indexOf(item.id)
      if (isHave == -1) {
        this.selectGoodsState.checkGoodsList.push(item)
      } else {
        this.selectGoodsState.checkGoodsList.splice(isHave, 1)
      }
      this.selectGoodsState.goodsList[index].checkOut = !this.selectGoodsState.goodsList[index].checkOut
    },
    fuzhi() {
      this.courseFormState = this.selectGoodsState.checkGoodsList;
      this.dialogVisible = false
    },
    remove(item, index) {
      this.courseFormState.splice(index, 1)
    },
    addGoods() {
      this.dialogVisible = true;
      this.selectGoodsState.checkGoodsList = this.courseFormState;
      const len = this.selectGoodsState.goodsList.length
      const le = this.selectGoodsState.checkGoodsList.length
      for (let i = 0; i < len; i++) {
        this.selectGoodsState.goodsList[i].checkOut = false
        for (let j = 0; j < le; j++) {
          if (this.selectGoodsState.goodsList[i].name == this.selectGoodsState.checkGoodsList[j].name) {
            this.selectGoodsState.goodsList[i].checkOut = true
            break;
          }
        }
      }
    },
    changeNum() {
      const reg = /^[0-9]+.?[0-9]*/
      const isNum1 = reg.test(this.formInline.Num)
      if (!isNum1 || this.formInline.Num == 0) {
        this.formInline.Num = 1
      }
      let difference = 0;
      if (this.formInline.Num > this.courseState.curriculum.length) {
        difference = this.formInline.Num - this.courseState.curriculum.length;
        for (let i = 0; i < difference; i++) {
          this.courseState.curriculum.push({ content: "" })
        }
      }
      else if (this.formInline.Num < this.courseState.curriculum.length) {
        difference = this.courseState.curriculum.length - this.formInline.Num;
        for (let i = 0; i < difference; i++) {
          this.courseState.curriculum.splice(this.courseState.curriculum.length - 1, difference)
        }
      }


    }
  }
}
</script>
<style lang="scss" scoped>
.tips {
  color: #ff554b;
}
.add11 {
  max-height: 400px;
  overflow-y: auto;
}

.shangpin {
  width: 500px;
  margin: 20px 0;
}

.dia-box {
  ::v-deep .el-dialog-body {
    border-top: 1px solid #cfcfcf;
    padding: 10px 20px;
    max-height: 450px;
    overflow-y: auto;
  }

  ::deep .el-dialog-footer {
    background: floralwhite;
    text-align: center;
    padding-top: 10px;
  }
}

.dialog-content {
  .goods-tag {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;

    .item {
      display: flex;
      align-items: center;
      height: 28px;
      border: 1px solid #1a76d3;
      padding-left: 5px;
      color: #3681d6;
      margin: 5px 5px 5px 0;

      .icon {
        cursor: pointer;
        margin-left: 3px;
        width: 25px;
        height: 26px;
        font-size: 15px;
        text-align: center;
        line-height: 30px;

        &:hover {
          background-color: red;
          color: #cfcfcf;
        }
      }
    }
  }
}

.search-box {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #cfcfcf;

  &>div {
    margin-right: 15px;

    ::v-deep .el-input_inner {
      height: 38px;
      line-height: 38px;
    }
  }
}

.table-list {
  margin-top: 10px;
  border-top: 1px solid #cecece;
  border-left: 1px solid #cecece;
  .title {
    background-color: #e7e7e7;
  }

  .title,
  .goods-item {
    display: flex;
    color: #192942;
    font-size: 14px;

    .item {
      text-align: center;
      border-right: 1px solid #cecece;
      border-bottom: 1px solid #cecece;
      height: 40px;
      line-height: 40px;

      .btn {
        span {
          cursor: pointer;
        }
      }

      .inp {
        padding: 0 5px;
        ::v-deep .el-input__inner {
          height: 22px;
          line-height: 22px;
          text-align: center;
          font-size: 12px;
        }
      }
    }
  }
}

.good-list {
  display: flex;
  flex-wrap: wrap;

  .item {
    display: flex;
    align-items: center;
    height: 28px;
    line-height: 26px;
    border: 1px solid #1a76d3;
    padding-left: 5px;
    margin: 0 5px 15px 0;
    color: #3681d6;

    .icon {
      width: 25px;
      height: 26px;
      font-size: 15px;
      text-align: center;
      line-height: 30px;

      &:hover {
        background-color: #ff4a3f;
        color: #fff;
      }
    }
  }
}

.form-item {
  display: flex;
  margin-top: 20px;
  margin-bottom: 30px;
  padding-left: 10px;

  .inp-name {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    width: 65px;
    text-align-last: justify;
    margin-right: 10px;
  }
}

.table {
  width: 600px;
  .title {
    display: flex;
    align-items: center;
    height: 30px;
    color: #192942;
    background: #e7e7e7;
    border: 1px solid #cfcfcf;
    font-size: 14px;

    &>div:nth-child(1) {
      text-align: center;
      width: 79px;
      height: 30px;
      line-height: 30px;
      border-right: 1px solid #cfcfcf;
    }

    &>div:nth-child(2) {
      flex: 1;
      text-align: center;
    }
  }

  .content-list {
    max-height: 250px;
    text-align: scroll;
  }

  .table-item {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 12px;
    color: #666666;
    border: 1px solid #cfcfcf;
    border-top: 0;

    &>div:nth-child(1) {
      text-align: center;
      width: 79px;
      height: 40px;
      line-height: 40px;
      border-right: 1px solid #cfcfcf;
    }

    &>div:nth-child(2) {
      flex: 1;
      padding: 0 10px;

      .el-input {
        width: 100%;
      }
    }
  }

}</style>